<script setup lang="ts">
import BGpage from './BGpage.vue';
import ClassRoomOnline from './ClassRoomOnline.vue';
import EchartDemo from './EchartDemo.vue';
import EchartFive from './EchartFive.vue';
import Echarts from './Echarts.vue';
import Pane from './pane.vue';
import Tables from './Tables.vue';

</script>

<template>
  <div class="main">
    <BGpage>
      <div class="title">
        <span>监控大屏</span>
      </div>
      <div class="context">
        <div class="row1"> 
           <EchartDemo style="width: 100%; height: 40vh;"></EchartDemo>
           <Echarts style="width: 100%; height: 40vh;"></Echarts>
           <EchartFive style="width: 100%; height: 40vh;"></EchartFive>
         </div>  
        <div class="row2">
           <ClassRoomOnline style="width: 67%; height: 50vh;"></ClassRoomOnline>
           
          <Tables style="width: 33%; height: 50vh;"/>
          
      </div>
      </div>
    </BGpage>
  </div>
</template>

<style scoped>
.main{
  width: 100vw;
  height: 100vh;
}
.title{
  background-image: url(../images/title_bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title>span{
  font-size:4vh ;
  color: white;
}
.row1{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.row2{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
</style>
